<template>
  <div class="Invitation_code">
    <div class="code_img" v-if="link !== ''">
      <QrcodeVue :value="link" width="130" height="130" />
    </div>
    <div class="txt_tab" v-if="txt !== ''">{{txt}}</div>
  </div>
</template>

<script>
  import QrcodeVue from "qrcode-vue3";
  import http from "../../http";

  export default {
    data(){
      return {
        link: '',
        txt: ''
      }
    },
    methods: {
      getLink: async function(){
        let res = await http.get(`/api/user/myInviteLink`, true);
        if (res.code === 200) {
          this.link = res.data;
        }else{
          this.txt = res.msg;
        }
      },
      getIsActive: async function(){
        let res = await http.get(`/api/user/isActive`);
        if(res.code === 200){
          if(res.data){
            this.getLink();
          }else{
            Toast(this.$t("active.activeTips"));
            this.$store.commit('changeOverlayName',{name: 'ActivationAddress', params: {invite: true}})
          }
        }
      }
    },
    mounted() {
      this.getIsActive();
    },
    watch: {
      '$route' (to,from){
        if(to.path === "/InvitationCode" && from.path === "/InvitationCode"){
          this.getIsActive();
        }
      }
    },
    components: {
      QrcodeVue
    }
  }
</script>

<style scoped lang="scss">
  .Invitation_code {
    width: 100%;
    height: 100%;
    background: url("@/assets/InvitationCode/WechatIMG6.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 150px;
  }
  .txt_tab{
    padding: 6px;
    font-size: 16px;

    text-align: center;
    background: #fff;
    border-radius: 3px;
  }
  .code_img {
    padding: 6px;
    text-align: center;
    background: #fff;
    border-radius: 3px;
    div {
      font-size: 0;
    }
  }
</style>
